<template>
  <div class="subordinate">
    <topUserHead :infoData="infoData"></topUserHead>
    <div class="listBox">
      <div class="txt">我的居民/城主</div>
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="lis_f">
          <div class="lis_f_l">用户身份：{{ item.type == 1 ? "居民" : "城主" }}</div>
          <div class="lis_f_r">{{ item.status == 1 ? "已实名" : "未实名" }}</div>
        </div>
        <div class="lis_f">
          <div class="lis_f_m">手机号：{{ item.tel }}</div>
          <div class="lis_f_t">
            <span>注册时间：</span>
            <span v-if="item.created_at">{{ item.created_at.slice(0,10) }}</span>
          </div>
        </div>
        <div class="lis_b">
          <div class="Consumption_amount">消费金额：¥{{ item.amounts }}</div>
          <div class="Release_amount">待释放云积分：{{ item.invented_points }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import topUserHead from "./components/topUserHead.vue";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      infoData: {},
      list: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  components: { topUserHead },
  activated() {
    this.getData();
    this.getList();
  },
  methods: {
    async getMoreData() {
      if (!this.isLoadMore) {
        return;
      }
      this.isLoadMore = false;
      console.log("getMoreData", this.page, this.total_page);
      if (this.page >= this.total_page) return;
      this.page = this.page + 1;
      let json = {
        page: this.page
      };
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.subMemberList", json, "");
      this.isLoadMore = true;
      if (result) {
        this.list = this.list.concat(data.list.data);
      } else {
        this.isLoadMore = false;
        this.$toast(msg);
        this.page = this.page - 1;
      }
    },
    async getList() {
      let json = {
        page: this.page
      };
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.subMemberList", json, "");
      if (result) {
        this.list = data.list.data;
        this.total_page = data.list.pages;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.index", {}, "");
      if (result) {
        if (data.man_type == 0) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "点击确认跳转申请页面",
              showCancelButton: false
            })
            .then(() => {
              this.$router.replace(this.fun.getUrl("idShop_apply"));
            });
          return;
        }
        this.infoData = data;
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.listBox {
  margin: 0.63rem 0.75rem;
  padding: 0.94rem 0.66rem;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0.5rem;
  .txt {
    font-weight: bold;
    font-size: 0.94rem;
    color: #00001c;
    text-align: left;
    margin-bottom: 0.84rem;
  }
  .lis {
    padding: 0.72rem 0 0 0;
    box-sizing: border-box;
    background: #f15353;
    border-radius: 0.75rem;
    margin-bottom: 0.63rem;
    .lis_b {
      background: #f47575;
      border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
      display: flex;
      justify-content: space-between;
      padding: 0.47rem 0.63rem;
      box-sizing: border-box;
      font-size: 0.81rem;
      color: #ffffff;
      .Consumption_amount {
        flex: 1;
        text-align: left;
      }
      .Release_amount {
        flex: 1;
        position: relative;
        text-align: left;
        padding-left: 0.5rem;
      }
      .Release_amount::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 1px;
        border-right: 1px solid #fff;
      }
    }
    .lis_f {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0.63rem;
      .lis_f_l {
        font-weight: bold;
        font-size: 1rem;
        color: #ffffff;
      }
      .lis_f_r {
        font-size: 0.69rem;
        color: #ffffff;
        padding: 0.22rem;
        background: #f68787;
      }
      .lis_f_m,
      .lis_f_t {
        font-size: 0.81rem;
        color: #ffffff;
        margin: 0.72rem 0;
      }
    }
  }
}
</style>
